<template>
	<view class="page">
		<view class="banner relative">
			<image src="https://aiet-file-center.oss-cn-hangzhou.aliyuncs.com/shuziren/audio/banner54716.png" class="bannerImg absolute"></image>
			<u-gap height="526"></u-gap>
		</view>
		<view class="loginArea">
			<view class="weChat flex-column align-center absolute-center" @click="toLogin">
				<image src="../../static/weChat.png" style="width: 120rpx; height: 120rpx;"></image>
				<u-gap height="15"></u-gap>
				<text style="font-size: 30rpx;">微信授权登录</text>
			</view>
			<view class="box absolute-center" v-if="isBand">
				<view class="title text-center padding-column40">绑定手机号</view>
				<view class="inpVue">
					<view class="label">手机号</view>
					<view class="flex">
						<input type="number" v-model="name" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="inpVue margin50">
					<view class="label">验证码</view>
					<view class="flex align-center">
						<input type="number" v-model="code" placeholder="请输入验证码" />
						<view class="code" @click="sendCode()">{{ text }}</view>
					</view>
				</view>
				<view class="bandBtn margin60" @click="bandFun()">绑定</view>
			</view>
		</view>
		
		<u-popup v-model="show" mode="center" border-radius="12">
			<view class="popVue padding40">
				<view class="flex align-center">
					<image
						src="../../static/logo.jpg"
						mode="widthFix" style="width: 46rpx; border-radius: 50%;"></image>
					<text style="color: #333;font-weight: 600;padding-left: 20rpx;">小昭数字人</text>
					<text style="color: #333;font-weight: 600;padding-left: 12rpx;">申请</text>
				</view>
				<view class="label">获取您的微信信息</view>
				<view class="btns flex-between align-center margin40">
					<view class="btn" @click="show = false">拒绝</view>
					<view class="btn" @click="loginByWeChat()">允许</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checked: false,
			name: "",
			code: "",
			text: '获取验证码',
			isSend: false,
			show: false,
			isBand: false,
		}
	},
	methods: {
		toLogin(){
			console.log(this.isBand)
			if(this.isBand) return this.$u.toast("请绑定手机号")
			this.show = true
		},
		
		// 绑定手机号
		async bandFun(){
			if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号")
			if (!this.code) return this.$u.toast("请输入验证码")
			const res = await this.$request('/aiet-user-center/user/bindPhone', {
				phone: this.name,
				code: this.code,
				companyId: 2
			})
			if(res.code===200) {
				this.isBand = false
				this.name = ""
				this.code = ""
				this.$u.toast("登录成功")
				uni.setStorageSync("ai-token", res.data.token)
				this.$store.state.isLogin = true
				this.$store.state.user = res.data.user
				setTimeout(() => {
					uni.switchTab({
						url: "../index/index"
					})
				}, 1000)
			}else{
				this.$u.toast(res.msg)
			}
		},

		// 微信授权登录
		loginByWeChat() {
			this.show = false
			let that = this
			uni.showLoading()
			uni.login({
				provider: 'weixin',
				// #ifdef APP
				onlyAuthorize: true,
				// #endif
				success(loginRes) {
					const { code } = loginRes;
					console.log(code)
					that.$request("/aiet-user-center/user/wxCodeLogin", { 
						code,
						companyId: 2
					}).then(res => {
						if (res.code === 200) {
							uni.hideLoading()
							uni.setStorageSync("ai-token", res.data.token)
							that.$store.dispatch("getUser")
							that.$store.state.isLogin = true
							if (res.data.user.phone) {
								that.$u.toast('登录成功');
								setTimeout(() => {
									uni.switchTab({
										url: "../index/index"
									})
								}, 1000)
							}else{
								that.$u.toast('请绑定手机号');
								that.isBand = true
							}
						} else {
							uni.hideLoading()
							that.$u.toast(res.msg);
						}
					})
				},
				fail(loginErr) {
					uni.hideLoading()
					that.$u.toast(loginErr.errMsg);
					console.log("uni.login调用失败：", loginErr)
				}
			})
		},

		// 发送验证码
		async sendCode() {
			if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号")
			if (this.isSend) return
			this.isSend = true;
			uni.showLoading()
			const res = await this.$request('/aiet-user-center/user/sendCode', {
				phone: this.name,
			});
			if (res.code === 200) {
				uni.hideLoading()
				this.$u.toast('发送成功');
				let count = 60;
				this.text = `${count}s`;
				let timer = setInterval(() => {
					count--;
					this.text = `${count}s`;
					if (count === 0) {
						clearInterval(timer);
						this.text = '获取验证码';
						this.isSend = false;
					}
				}, 1000);
			} else {
				uni.hideLoading()
				this.$u.toast(res.msg);
				this.isSend = false;
			}
		}
	}
}
</script>

<style lang="less" scoped>
.page {
	width: 100%;
	height: 100%;
	.banner {
		width: 100%;
		background: #FFD1D1;
		.bannerImg {
			width: 100%;
			height: 750rpx;
			z-index: 99;
		}
	}
	.loginArea {
		width: 100%;
		height: calc(100vh - 526rpx - var(--window-bottom) - var(--window-top));
		position: relative;
		.weChat {
			top: 300rpx;
			text {
				color: #333;
				font-weight: 600;
			}
		}
		.box {
			width: 690rpx;
			background: #fff;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			border-radius: 12rpx;
			padding: 0 30rpx 60rpx 30rpx;
			top: 100rpx;
			.title {
				color: #333;
				font-weight: 600;
				font-size: 30rpx;
			}
			.inpVue {
				width: 100%;
				.label {
					color: #333;
				}
				input {
					flex: 1;
					height: 88rpx;
					border-radius: 12rpx;
					border: 1rpx solid #ececec;
					padding-left: 30rpx;
					display: block;
					margin-top: 15rpx;
					color: #000;
				}
				.code {
					width: 200rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					margin-top: 15rpx;
					margin-left: 20rpx;
					border-radius: 12rpx;
					background: #f5f5f5;
					color: #fff;
					background: #FFA0A0;
				}
			}
			.bandBtn {
				width: 100%;
				height: 88rpx;
				background: #FFA0A0;
				border-radius: 44rpx;
				color: #fff;
				line-height: 88rpx;
				text-align: center;
				font-size: 30rpx;
			}
		}
	}
}

.popVue {
	width: 650rpx;
	background: #fff;
	border-radius: 10rpx;

	.label {
		color: #000;
		font-weight: 600;
		padding: 50rpx 0 30rpx;
	}

	.btns {
		width: 560rpx;
		height: 80rpx;

		.btn {
			width: 260rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			text-align: center;
			font-weight: 500;
		}

		.btn:nth-child(1) {
			background: #f5f5f5;
			color: #FFA0A0;
		}

		.btn:nth-child(2) {
			background: #FFA0A0;
			color: #fff;
		}
	}
}
</style>
